<?php
/**
 * Created by PhpStorm.
 * User: eric
 * Date: 11/28/14
 * Time: 18:58
 */
$this->title = Yii::t('app', 'message');
$this->params['breadcrumbs'][] = ['label' => Yii::t('app', 'samples'), 'url' => ['index']];
$this->params['breadcrumbs'][] = $this->title;
?>
<!--BEGIN HEADER-->
<div class="section-header">
    <h3 class="text-standard"><i class="fa fa-fw fa-arrow-circle-right text-gray-light"></i> <?=$this->title?> <small><?=$this->subTitle?></small></h3>
</div>
<!--END HEADER-->
<!--BEGIN BODY-->
<div class="section-body">
    <?php \eric\widgets\Box::begin([
        'title' => "simple Message",
        'type' => \eric\widgets\Box::BOX_TYPE_UNDERLINE,
        'boxStyle' => \eric\widgets\BoxBody::BODY_STYLE_WHITE,
    ])?>
    <div class="row">
        <div class="col-md-3">
            <div class="alert alert-info">
                <a class="close" data-dismiss="alert" href="#">×</a>
                <h4 class="alert-heading">Info!</h4>
                <p>
                    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                </p>
                <p>
                    <a class="btn btn-primary" href="#">Do this</a>
                    <a class="btn btn-support5" href="#">Cancel</a>
                </p>
            </div>
        </div><!--end .col-md-3 -->
        <div class="col-md-3">
            <div class="alert alert-success">
                <a class="close" data-dismiss="alert" href="#">×</a>
                <h4 class="alert-heading">Success!</h4>
                <p>
                    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                </p>
                <p>
                    <a class="btn btn-support1" href="#">Do this</a>
                    <a class="btn btn-white" href="#">Cancel</a>
                </p>
            </div>
        </div><!--end .col-md-3 -->
        <div class="col-md-3">
            <div class="alert alert-warning">
                <a class="close" data-dismiss="alert" href="#">×</a>
                <h4 class="alert-heading">Warning!</h4>
                <p>
                    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                </p>
                <p>
                    <a class="btn btn-warning" href="#">Do this</a>
                    <a class="btn btn-support4" href="#">Cancel</a>
                </p>
            </div>
        </div><!--end .col-md-3 -->
        <div class="col-md-3">
            <div class="alert alert-danger">
                <a class="close" data-dismiss="alert" href="#">×</a>
                <h4 class="alert-heading">Error!</h4>
                <p>
                    Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.
                </p>
                <p>
                    <a class="btn btn-danger" href="#">Do this</a>
                    <a class="btn btn-support3" href="#">Cancel</a>
                </p>
            </div>
        </div><!--end .col-md-3 -->
    </div>
    <?php \eric\widgets\Box::end()?>
    <?php \eric\widgets\Box::begin([
        'title' => "alert Message",
        'type' => \eric\widgets\Box::BOX_TYPE_UNDERLINE,
        'boxStyle' => \eric\widgets\BoxBody::BODY_STYLE_WHITE,
    ])?>
    <div class="row">
        <div class="col-sm-7">
            <p class="lead">
                <strong>Toastr</strong> is a Javascript library for non-blocking notifications.
            </p>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Title</span>
                            <input id="msgTitle" type="text" class="form-control input-title" value="这是一个消息">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Message</span>
                            <input id="msgBody" type="text" class="form-control input-message" value="这是一个消息的内容">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="btn-group btn-group-justified">
                        <a id="toast-info" class="btn btn-info"><i class="fa fa-info"></i> Show info</a>
                        <a id="toast-success" class="btn btn-success"><i class="fa fa-check"></i> Show success</a>
                        <a id="toast-warning" class="btn btn-warning"><i class="fa fa-warning"></i> Show warning</a>
                        <a id="toast-error" class="btn btn-danger"><i class="fa fa-shield"></i> Show error</a>
                    </div>
                    <br>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="highlight">
<pre class="prettyprint">
    \eric\widgets\Toastr::widget([
        'onload' => "showMessage",
        'progressBar' => true,
        'closeBtn' => true,
    ]);
    var getMessage = function(){
            var title = $('#msgTitle').val();
            var body = $('#msgBody').val();
            var message = {'title' : title, 'body' : body};
            console.info(message);
            return message;
        }
        $('#toast-info').on('click', function(e){
            var message = getMessage();
            toastr.info(message['title'], message['body']);
        });
        $('#toast-success').on('click', function(e){
            var message = getMessage();
            toastr.success(message['title'], message['body']);
        });
        $('#toast-warning').on('click', function(e){
            var message = getMessage();
            toastr.warning(message['title'], message['body']);
        });
        $('#toast-error').on('click', function(e){
            var message = getMessage();
            toastr.error(message['title'], message['body']);
        });

</pre>
            </div>
        </div>
    </div>
    <?php \eric\widgets\Box::end()?>
</div>
<!--END BODY-->
<?=\eric\widgets\Toastr::widget([
    'onload' => "showMessage",
    'progressBar' => true,
    'closeBtn' => true,
]);?>
<script>
    var showMessage = function(){
        toastr.info('这是内容', "这是标题");
    }
    $(function(){
        var getMessage = function(){
            var title = $('#msgTitle').val();
            var body = $('#msgBody').val();
            var message = {'title' : title, 'body' : body};
            console.info(message);
            return message;
        }
        $('#toast-info').on('click', function(e){
            var message = getMessage();
            toastr.info(message['title'], message['body']);
        });
        $('#toast-success').on('click', function(e){
            var message = getMessage();
            toastr.success(message['title'], message['body']);
        });
        $('#toast-warning').on('click', function(e){
            var message = getMessage();
            toastr.warning(message['title'], message['body']);
        });
        $('#toast-error').on('click', function(e){
            var message = getMessage();
            toastr.error(message['title'], message['body']);
        });
    });
</script>